<template>
  <view class="carousel">
    <swiper
      :autoplay="false"
      circular
      @change="onChange"
      class="swiper-box"
    >
      <swiper-item v-for="item in list" :key="item.id">
        <navigator class="navigator" url="/pages/index/index" hover-class="none">
          <image
            :src="item.imgUrl"
            mode="aspectFill"
            class="image"
          ></image>
        </navigator>
      </swiper-item>
    </swiper>

    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<script setup lang="ts">

import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
const activeIndex = ref(0)

const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}

defineProps<{
  list: BannerItem[]
}>()

</script>

<style lang="scss">
  :host {
    display: block;
    height: 280rpx;
  }

  .carousel {
    height: 280rpx;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;

    .swiper-box {
      width: 100%;
      height: 280rpx;
    }

    .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 16rpx;
      display: flex;
      justify-content: center;
      .dot {
        width: 30rpx;
        height: 6rpx;
        margin: 0 8rpx;
        border-radius: 6rpx;
        background-color: rgba(255, 255, 255, 0.4);
      }
      .active {
        background-color: #fff;
      }
    }
    .navigator,
    .image {
      width: 100%;
      height: 100%;
    }
  }
</style>